{% extends 'homepage/index.html' %}
{% load staticfiles %}
{% block page %}
  <style type="text/css">
    .input-box {
      position: relative;
    }

    input {
      display: inline-block;
      border: 0px solid #d7d6d6;
      background: #fff;
      padding: 10px 20px 10px 20px;
      width: 195px;
      outline: none;
      font-size: 20px;
      height: 40px;
    }

    .unit {
      position: absolute;
      display: inline-block;
      left: 20px;
      top: 1px;
      z-index: 100;
      font-size: 10px;
    }

    .input-box {
      height: 60px;
    {#width: 235px;#}{#border: 1px solid #000000;#}
    }

  </style>
  <!-- Page Content -->
  <div class="container">

    <!-- Page Heading/Breadcrumbs -->
    <h1 class="mt-4 mb-3">联系我们
      <small></small>
    </h1>

    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="index.html">首页</a>
      </li>
      <li class="breadcrumb-item active">联系我们</li>
    </ol>

    <!-- Content Row -->
    <div class="row">
      <!-- Map Column -->
      <div class="col-lg-8 mb-4">
        <!-- Embedded Google Map -->
        <iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe>
      </div>
      <!-- Contact Details Column -->
      <div class="col-lg-4 mb-4">
        <h3>联系方式</h3>
        <p>
          台北市 文山區
          <br>100号
          <br>
        </p>
        <p>
          <abbr title="Phone">P</abbr>: (123) 456-7890
        </p>
        <p>
          <abbr title="Email">E</abbr>:
          <a href="mailto:name@example.com">name@example.com
          </a>
        </p>
        <p>
          <abbr title="Hours">H</abbr>: 周一至周五 : 9:00 AM to 5:00 PM
        </p>
      </div>
    </div>
    <!-- /.row -->

    <!-- Contact Form -->
    <!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
    <div class="row">
      <div class="col-lg-8 mb-4">
        <h3>给我们留言</h3>
        <form name="sentMessage" id="contactForm" novalidate>
          <div class="control-group form-group">
            <div class="input-box" id="text">
              <span class="unit" id="spantext">姓名</span>
              <input type="text" class="form-control" id="name" required
                     data-validation-required-message="Please enter your name." placeholder="请输入姓名">
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>电话</label>
              <input type="tel" class="form-control" id="phone" required
                     data-validation-required-message="Please enter your phone number.">
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>电子邮箱</label>
              <input type="email" class="form-control" id="email" required
                     data-validation-required-message="Please enter your email address.">
            </div>
          </div>
          <div class="control-group form-group">
            <div class="controls">
              <label>讯息</label>
              <textarea rows="10" cols="100" class="form-control" id="message" required
                        data-validation-required-message="Please enter your message" maxlength="999"
                        style="resize:none"></textarea>
            </div>
          </div>
          <div id="success"></div>
          <!-- For success/fail messages -->
          <button type="submit" class="btn btn-primary" id="sendMessageButton">发送</button>
        </form>
      </div>

    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->
  <script>
      document.getElementById("spantext").style.display = "none";

      document.getElementById("name").onfocus = function () {
          myOnFocusFunction()
      };
      document.getElementById("name").onblur = function () {
          myOnBlurFunction()
      };

      function myOnFocusFunction() {
          document.getElementById("spantext").style.display = "";
          document.getElementById("name").style.height = "20px";
          document.getElementById("name").style.padding = "30px 20px 10px 20px";
      }

      function myOnBlurFunction() {
          document.getElementById("spantext").style.display = "none";
          document.getElementById("name").style.height = "40px";
          document.getElementById("name").style.padding = "10px 20px 10px 20px";
      }
  </script>

{% endblock %}